<template>
  <SvgIcon
    class="lg national-flag"
    v-for="(item, index) in getIcos"
    :key="index"
    :name="item.icon"
  />
</template>

<script setup>
import { reactive, defineProps, computed } from 'vue'
import { useConfigStore } from '@/stores/config'
import SvgIcon from '@/components/Icon.vue'

const configStore = useConfigStore()
const countryList = reactive([])
const prop = defineProps({
  countryId: {
    default: '',
    type: String,
  },
})

const getIcos = computed(() => {
  if (countryList.length === 0) {
    return [] // 确保 countryList 已初始化
  }

  if (prop.countryId) {
    let cts = prop.countryId.split(',')
    return countryList.filter((item) => cts.includes(item.id))
  }
  return []
})

const getCountriesList = async () => {
  const res = await configStore.initCountryList()
  if (res) {
    countryList.splice(0, countryList.length, ...res) // 更新 countryList
  } else {
    countryList.length = 0 // 清空 countryList
  }
}

getCountriesList()
</script>

<style scoped>
.svg-icon {
  width: 2em !important;
  height: 1.4em !important;
}
</style>
